<template>
    <div class="topper">
        <div class="logo">

            <img src="http://i.huasongwang.com/i/logo/huayu.jpg" width="125px" height="125px" @click="backHome()">
        </div>
        <div class="search">
            <el-input size="medium" placeholder="请输入要输入的关键字" v-model="keyword" @keyup.enter.native="initFun">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <button class="search_button"><i slot="prefix" class="el-input__icon el-icon-search"></i></button>
            <!-- <i class="el-icon-zoom-out"></i> -->

        </div>
        <!-- <div class="wenzi">111</div> -->

        <div class="telphone">

            <i slot="prefix" class="el-icon-phone-outline
"></i>&nbsp; 400-000-0000

        </div>




    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: ''
        }
    },
    methods: {
        backHome() {
            this.$router.push({ path: '/' })
                .catch(err => err)
        },
        initFun(){
            console.log('22222');
        }

    },

}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
    border-color: #fdc68c;
    /* 红色边框 */
}

// ::v-deep .el-input.is-focus .el-input__inner {  
//   border-color: #fdc68c; /* 聚焦时绿色边框 */  
// } 
.topper {

    height: 150px;
    display: flex;
    justify-content: space-between;

    .logo {
        // border: 1px solid black;
        width: 20%;
        line-height: 200px;

        img {
            margin-top: 20px;
        }

    }

    .search {
        ::v-deep .el-input.is-focus .el-input__inner {
            border-color: #ff00ff !important;
            /* 聚焦时边框颜色改为紫色 */
        }

        // border: 1px solid black;
        width: 50%;
        line-height: 150px;

        .el-input {
            width: 70%;
        }

        .search_button {
            width: 40px;
            margin-left: 3px;
            // margin-top: 100px;
            height: 38px;
            border-color: #fdc68c;
            /* 红色边框 */
            border-style: solid;
            /* 确保边框是实线 */
            border-width: 1px;
            /* 设置边框宽度 */
            background-color: #fdc68c;
        }



    }

    .telphone {
        font-size: 25px;
        // border: 1px solid black;
        width: 30%;

        .el-icon-phone-outline {
            line-height: 150px;
        }
    }
}</style>